<template>
  <div class=" mx-auto p-6">
    <div class=" font-bold mb-2">统计详情</div>
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <!-- 图表类型切换 -->
       <div class="flex items-center">
            <div class="flex  mb-4 w-full"  v-for="(type, index) in chartTypes" :key="index">
                <button  @click="currentType = type.value"
                :class="[
                    'px-6 py-2 !rounded-button whitespace-nowrap w-full',
                    currentType === type.value 
                    ? 'bg-blue-100 text-blue-500' 
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                ]"
                >
                <el-icon class="mr-2" v-if="type.icon">
                    <component :is="type.icon" />
                </el-icon>
                {{ type.label }}
                </button>
            </div>
        </div>
      <!-- 图表展示区域 -->
      <div class="h-[300px] w-full" ref="chartRef"></div>
    </div>
  </div>
</template>

<script  setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { PieChart, TrendCharts, DataLine, Histogram } from '@element-plus/icons-vue';

const chartTypes = [
  { label: '柱状图', value: 'bar', icon: 'Histogram' },
  { label: '饼状图', value: 'pie', icon: 'PieChart' },
  { label: '条形图', value: 'horizontalBar', icon: 'TrendCharts' },
  { label: '折线图', value: 'line', icon: 'DataLine' }
];

const currentType = ref('bar');
const chartRef = ref(null);
let chart = null;
const {data} = defineProps({
    data: {type:Array,default: () => []},

});
const getChartOption = (type) => {
  const baseOption = {
    animation: false,
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c}%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
  };

  const options = {
    bar: {
      ...baseOption,
      xAxis: {
        type: 'category',
        data: data.map(item => item.name)
      },
      yAxis: {
        type: 'value',
        name:'百分比(100%)',
     
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [{
        data: data.map(item => item.value),
        type: 'bar',
         barWidth: '20%',
        itemStyle: {
          color: function(params) {
            const colors = ['#3B7CFF', '#FF7C7C', '#FFB673', '#4CD964'];
            return colors[params.dataIndex];
          }
        }
      }]
    },
    pie: {
      ...baseOption,
      series: [{
        type: 'pie',
        radius: '50%',
        data: data.map(item => ({
          name: item.name,
          value: item.value
        })),
        label: {
          formatter: '{b}: {d}%'
        }
      }]
    },
    horizontalBar: {
      ...baseOption,
      xAxis: {
        type: 'value',
        name:'百分比(100%)',
        nameLocation: 'end',
        nameGap: -60,      // 负值向左移动标题
        nameTextStyle: {
            align: 'center',  // 对齐到轴线右侧
            verticalAlign: 'middle',
            // padding: [0, -60, 60, 0] // 右内边距微调
        },
        axisLabel: {
          formatter: '{value}%'
        }
      },
      yAxis: {
        type: 'category',
        data: data.map(item => item.name).reverse()
      },
      series: [{
        data: data.map(item => item.value).reverse(),
        type: 'bar',
         barWidth: '20%',
        itemStyle: {
          color: function(params) {
            const colors = ['#3B7CFF', '#FF7C7C', '#FFB673', '#4CD964'].reverse();
            return colors[params.dataIndex];
          }
        }
      }]
    },
    line: {
      ...baseOption,
      xAxis: {
        type: 'category',
        data: data.map(item => item.name)
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [{
        data: data.map(item => item.value),
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#3B7CFF'
        }
      }]
    }
  };

  return options[type];
};

const initChart = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    chart.setOption(getChartOption(currentType.value));
  }
};

watch(currentType, (newType) => {
  if (chart) {
    chart.setOption(getChartOption(newType), true);
  }
});

onMounted(() => {
  initChart();
  window.addEventListener('resize', () => {
    chart?.resize();
  });
});
</script>

<style scoped>
.el-icon {
  vertical-align: middle;
}
</style>

